<!-- 公共的头部 -->
<template>
	<div>
		<div class="wrap">
			<el-row class="content" :span="24">
				<el-col class="awll">
					<div class="grid-content el-pro-top-nav-header-main-left">
						<div class="el-pro-top-nav-header-logo" id="logo">
							<a
								><img src="../../assets/logo-mabang.png" alt="logo" />
								<h1>分销-订单处理专家</h1></a
							>
						</div>
					</div>
					<div style="float: left">
						<el-menu
							:default-active="defaultActiveIndex"
							mode="horizontal"
							@select="handleSelect"
							:router="true"
						>
							<template v-for="item in navList">
								<el-menu-item :index="item.entity.name" :key="item.id">
									<template slot="title">
										<span slot="title">{{ item.entity.alias }}</span>
									</template>
								</el-menu-item>
							</template>
						</el-menu>
					</div>
					<div class="el-pro-top-nav-header-main-right">
						<a href="" class="action___3152f">
							<span class="anticonsp1 anticon-question-circle">
								<svg
									viewBox="64 64 896 896"
									focusable="false"
									data-icon="question-circle"
									width="1em"
									height="1em"
									fill="currentColor"
									aria-hidden="true"
								>
									<path
										d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
									></path>
									<path
										d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
									></path>
								</svg>
							</span>
						</a>
						<span class="ant-avatar topAvatar___1e2B1">
							<img
								src="https://vo-upload.mabangerp.com/upload/member/20210406/161770750922493000119.jpeg"
								alt=""
							/>
						</span>
						<span class="action___3152f">
							<span class="name___d1DsZ">内网</span>
							<span role="img" aria-label="caret-down" class="anticonsp2 anticon-caret-down"
								><svg
									viewBox="0 0 1024 1024"
									focusable="false"
									data-icon="caret-down"
									width="1em"
									height="1em"
									fill="currentColor"
									aria-hidden="true"
								>
									<path
										d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
									></path></svg
							></span>
						</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
	//import引入的组件需要注入到对象中才能使用
	components: {},
	data() {
		//这里存放数据
		return {
			headerlist: [
				{
					index: '/index',
					name: '首页',
					isactive: true,
				},
				{
					index: '/productManager',
					name: '产品',
					isactive: false,
					children: [{}],
				},
				{
					index: '/publishedManager',
					name: '刊登',
					isactive: false,
				},
				{
					index: 'commodity',
					name: '商品',
					isactive: false,
				},
				{
					index: 'order',
					name: '订单',
					isactive: false,
				},

				{
					index: 'finance',
					name: '财务',
					isactive: false,
				},
				{
					index: 'system',
					name: '系统',
					isactive: false,
				},
			],
			defaultActiveIndex: '/',
			navList: [
				// id: 数据标识；parentMenuId: 父级ID；name:匹配路由；icon：显示对应的图标；alias：标题文字；state：权限是否开通；sort：显示顺序；value：；
				//type:是否可跳转；
				{
					entity: {
						id: 0,
						parentMenuId: 0,
						name: 'index',
						icon: 'el-icon-message',
						alias: '首页',
						state: 'ENABLE',
						sort: 0,
						path: '/index',
						type: 'none',
						leaf: true,
						menuShow: true,
					},
					children: null,
				},
				{
					entity: {
						id: 1,
						parentMenuId: 0,
						name: 'productManager',
						icon: 'el-icon-message',
						alias: '产品',
						state: 'ENABLE',
						sort: 1,
						path: '/productManager',
						type: 'product',
						menuShow: true,
					},
					children: [
						{
							entity: {
								id: 3,
								parentMenuId: 1,
								name: 'authManage',
								icon: 'el-icon-loading',
								alias: '代购',
								state: 'ENABLE',
								sort: 0,
								leaf: false,
								path: '/authManage',
								type: 'product',
								menuShow: true,
							},
							children: [
								{
									entity: {
										id: 14,
										parentMenuId: 7,
										name: 'dataManage',
										icon: 'el-icon-sold-out',
										alias: '数据采集',
										state: 'ENABLE',
										sort: 0,
										path: '/dataManage',
										type: 'product',
										menuShow: true,
									},
									children: null,
								},
								{
									entity: {
										id: 14,
										parentMenuId: 7,
										name: 'dataLibraryManage',
										icon: 'el-icon-sold-out',
										alias: '产品库',
										state: 'ENABLE',
										sort: 1,
										value: '/dataLibraryManage',
										type: 'product',
										menuShow: true,
									},
									children: null,
								},
							],
						},
						{
							entity: {
								id: 4,
								parentMenuId: 1,
								name: 'roleManage',
								icon: 'el-icon-bell',
								alias: '分销',
								state: 'ENABLE',
								leaf: false,
								sort: 1,
								path: '/roleManage',
								type: 'product',
								menuShow: true,
							},
							children: [
								{
									entity: {
										id: 0,
										parentMenuId: 1,
										name: 'roleManagelib',
										icon: 'el-icon-bell',
										alias: '分销商品库',
										state: 'ENABLE',
										sort: 1,
										path: '/library',
										type: 'product',
										menuShow: true,
									},
								},
							],
						},
					],
				},
				{
					entity: {
						id: 6,
						parentMenuId: 0,
						name: 'pubilshedManage',
						icon: 'el-icon-news',
						alias: '刊登',
						state: 'ENABLE',
						sort: 2,
						leaf: false,
						value: null,
						type: 'none',
						menuShow: true,
					},
					children: [
						{
							entity: {
								id: 7,
								parentMenuId: 6,
								name: 'accountManage',
								icon: 'el-icon-phone-outline',
								alias: '产品刊登池',
								state: 'ENABLE',
								sort: 0,
								value: '',
								leaf: false,
								type: 'none',
								menuShow: true,
							},
							children: null,
						},
						{
							entity: {
								id: 8,
								parentMenuId: 2,
								name: 'integralManage',
								icon: 'el-icon-picture',
								alias: 'ebay刊登',
								state: 'ENABLE',
								sort: 1,
								leaf: true,
								value: '/user/ebay',
								type: 'link',
								menuShow: true,
							},
							children: null,
						},
						{
							entity: {
								id: 9,
								parentMenuId: 7,
								name: 'integralManage',
								icon: 'el-icon-picture',
								alias: 'lazada刊登',
								state: 'ENABLE',
								sort: 2,
								leaf: true,
								value: '/user/lazada',
								type: 'link',
								menuShow: true,
							},
							children: null,
						},
					],
				},
				{
					entity: {
						id: 10,
						parentMenuId: 0,
						name: 'contentManage',
						icon: 'el-icon-rank',
						alias: '商品',
						state: 'ENABLE',
						sort: 3,
						value: null,
						type: 'none',
						menuShow: true,
					},
					children: [
						{
							entity: {
								id: 11,
								parentMenuId: 10,
								name: 'shopManage',
								icon: 'el-icon-printer',
								alias: '商品sku',
								state: 'ENABLE',
								sort: 0,
								leaf: true,
								value: '/content/classify',
								type: 'link',
								menuShow: true,
							},
							children: null,
						},
					],
				},
				{
					entity: {
						id: 12,
						parentMenuId: 0,
						name: 'orderManage',
						icon: 'el-icon-rank',
						alias: '订单',
						state: 'ENABLE',
						sort: 4,
						value: null,
						type: 'none',
						menuShow: true,
					},
					children: [
						{
							entity: {
								id: 13,
								parentMenuId: 15,
								name: 'orderlistMange',
								icon: 'el-icon-printer',
								alias: '订单列表',
								state: 'ENABLE',
								leaf: true,
								sort: 0,
								value: '/content/order',
								type: 'link',
								menuShow: true,
							},
							children: null,
						},
						{
							entity: {
								id: 14,
								parentMenuId: 11,
								name: 'syncMange',
								icon: 'el-icon-printer',
								alias: '同步异常',
								state: 'ENABLE',
								leaf: true,
								sort: 1,
								value: '/content/syncAbnomal',
								type: 'link',
								menuShow: true,
							},

							children: null,
						},
						{
							entity: {
								id: 15,
								parentMenuId: 12,
								name: 'logisticsMange',
								icon: 'el-icon-printer',
								alias: '物流授权',
								state: 'ENABLE',
								sort: 2,
								leaf: true,
								value: '/content/logistics',
								type: 'link',
								menuShow: true,
							},
							children: null,
						},
					],
				},
				{
					entity: {
						id: 2,
						parentMenuId: 21,
						name: 'financeManage',
						icon: 'el-icon-rank',
						alias: '财务',
						state: 'ENABLE',
						sort: 5,
						value: null,
						type: 'none',
						menuShow: true,
					},
					children: [
						{
							entity: {
								id: 17,
								parentMenuId: 16,
								name: 'financereconcileMange',
								icon: 'el-icon-printer',
								alias: '财务对账',
								state: 'ENABLE',
								sort: 0,
								leaf: true,
								value: '/content/reconcile',
								type: 'link',
								menuShow: true,
							},
							children: null,
						},
					],
				},
				{
					entity: {
						id: 18,
						parentMenuId: 22,
						name: 'systemManage',
						icon: 'el-icon-rank',
						alias: '系统',
						state: 'ENABLE',
						sort: 6,
						value: null,
						type: 'none',
						menuShow: true,
					},
					children: [
						{
							entity: {
								id: 19,
								parentMenuId: 23,
								name: 'ShopauthorizationMange',
								icon: 'el-icon-printer',
								alias: '店铺授权',
								state: 'ENABLE',
								sort: 0,
								leaf: true,
								value: '/content/ShopauthorizationMange',
								type: 'link',
								menuShow: true,
							},
							children: null,
						},
					],
				},
			],
		}
	},
	//监听属性 类似于data概念
	computed: {},
	//监控data中的数据变化
	watch: {
		$route: function (to, from) {
			this.fetchNavData()
			console.log(to, from)
			this.defaultActiveIndex = window.sessionStorage.getItem('routeractive')
		},
	},
	//方法集合
	methods: {
		// 切换菜单栏
		handleSelect(index) {
			console.log('idnex.', index)
			this.defaultActiveIndex = index
			sessionStorage.setItem('routeractive', index)
		},
		fetchNavData() {
			// 初始化菜单激活项
			let cur_path = this.$route.path //获取当前路由
			// let routers = this.$router.options.routes // 获取路由对象
			let routers = this.navList
			console.log('houtaimock', routers)
			console.log('routers', this.$router.options.routes)
			console.log('indexaaa', cur_path)
			let nav_type = '',
				nav_name = ''
			for (var i = 0; i < routers.length; i++) {
				let children = routers[i].children
				if (children) {
					for (let j = 0; j < children.length; j++) {
						if (children[j].entity.path === cur_path) {
							console.log('sdad1231', children[j])
							nav_type = routers[i].entity.type
							nav_name = routers[i].entity.name
							console.log('sdsdsdsadasdsdas', nav_name)
							break
						}
						// 如果该菜单下还有子菜单
						// console.log('dasdasd', children[j].children)
						if (children[j].children) {
							let grandChildren = children[j].children
							console.log('path', grandChildren)
							for (let z = 0; z < grandChildren.length; z++) {
								if (grandChildren[z].entity.path === cur_path) {
									console.log('ssss')
									nav_type = routers[i].entity.type
									nav_name = routers[i].entity.name
									console.log('sdsdsdsadasdsdas', nav_name)
									break
								}
							}
						}
					}
				}
			}
			this.$store.state.topNavState = nav_type
			this.$store.state.leftNavState = nav_name
			if (nav_type == 'home') {
				this.defaultActiveIndex = '/'
			} else {
				this.defaultActiveIndex = '/' + nav_name + 'Manager'
				console.log('nav_type', nav_type)
			}
		},
		// toIndex() {
		// 	console.log('bbb', this.$route.path);
		// 	// 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
		// 	return this.$route.path.split('/')[1]
		// },
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {
		// 组件创建完后获取数据
		window.sessionStorage.setItem('routerlist', JSON.stringify(this.navList))
		this.fetchNavData()
		this.defaultActiveIndex = window.sessionStorage.getItem('routeractive')
		return this.$route.path.split('/')[1]
	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
	},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.wrap .content {
	width: 100%;
	height: 80px;
	padding-left: 16px;
	background: #001529;
}
.awll {
	display: flex;
	height: 100%;
}
.el-pro-top-nav-header-main-left {
	min-width: 192px;
	display: flex;
}
.el-pro-top-nav-header-logo {
	position: relative;
	min-width: 165px;
	height: 100%;
	overflow: hidden;
}
.el-pro-top-nav-header-logo > a {
	display: block;
	height: 80px;
}
.el-pro-top-nav-header-logo img {
	height: 27px;
	position: absolute;
	right: 0;
	top: 23px;
}
.el-pro-top-nav-header-logo h1 {
	line-height: 18px;
	font-size: 12px;
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-block;
	margin: 0 10px 0 0;
	color: #fff;
	font-weight: 400;
	vertical-align: top;
}
.el-pro-top-nav-header-menu {
	flex: 1 1 0%;
	min-width: 0;
}
.el-menu-u {
	height: 100%;
	border: none;
	display: flex;
}
.el-cig-li {
	color: #7ba4b4;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 0 50px;
	line-height: 80px;
}
.el-cig-li:hover {
	background-color: #1890ff;
	color: #fff;
}
.active {
	background-color: #1890ff;
	color: #fff;
}
.unactie {
	background-color: none;
	color: #7ba4b4;
}
.el-pro-top-nav-header-main-right {
	min-width: 141px;
	display: flex;
	float: right;
	height: 80px;
	margin-left: auto;
	overflow: hidden;
}
.action___3152f {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 12px;
	cursor: pointer;
	transition: all 0.3s;
}
.action___3152f span {
	vertical-align: middle;
}
.anticonsp1,
.anticonsp2 {
	color: #fff;
}
.action___3152f > span {
	vertical-align: middle;
}
.ant-avatar {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: rgba(0, 0, 0, 0.85);
	font-size: 14px;
	font-variant: tabular-nums;
	line-height: 1.5715;
	list-style: none;
	font-feature-settings: 'tnum', 'tnum';
	position: relative;
	display: inline-block;
	overflow: hidden;
	color: #fff;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
	background: #ccc;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 50%;
}
.ant-avatar img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.topAvatar___1e2B1 {
	top: 24px;
}
.name___d1DsZ {
	color: #fff;
	padding-right: 5px;
}
/* --------------- 水平一级菜单栏的样式--------------------- */
.el-menu.el-menu--horizontal {
	border-bottom: none !important;
	float: left;
	background: none;
}
.el-menu--horizontal > .el-menu-item.is-active {
	/* border-bottom: 2px solid #409eff; */
	color: #000;
	font-weight: 700;
	background: #fff;
}
.el-menu--horizontal > .el-menu-item {
	font-size: 20px;
	color: #fff;
	height: 80px;
	line-height: 80px;
	font-weight: 700;
	padding: 0 50px;
}
.el-menu--horizontal > .el-menu-item:hover {
	background-color: #fff;
	color: #000;
}
</style>
